<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>云相册</title>

    <link rel="stylesheet" type="text/css" th:href="@{/css/bulma.min.css}">

    <script type="text/javascript" th:src="@{js/jquery-3.3.1.js}"></script>

    <!--<script defer src="https://use.fontawesome.com/releases/v5.4.1/js/all.js"-->
    <!--integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7"-->
    <!--crossorigin="anonymous"></script>-->
</head>
<script type="text/javascript">

    $(function () {
        let $l_ipt_name = $(".l-ipt-name");
        let $l_ipt_pwd = $(".l-ipt-pwd");
        $l_ipt_pwd.focusin(function () {
            checkUserExist();
        });
        $l_ipt_name.focusin(function () {
            $(".name-info-area").empty();
            $l_ipt_name.removeClass("is-danger");
            $l_ipt_name.removeClass("is-success");
            $(".name-help").text("");
        });

        $(".l-btn").click(function () {
            login();
        });

    });

    function checkUserExist() {
        let flag = false;
        let $l_ipt_name = $(".l-ipt-name");
        let $l_name_area = $(".name-info-area");
        let v0 = $l_ipt_name.val().trim();
        if (v0 == null || v0 === "") {
            console.log(v0);
            $l_ipt_name.addClass("is-danger");
            $l_ipt_name.removeClass("is-success");
            $(".name-help").text("用户名不能为空");
            $l_name_area.empty();
            $l_name_area.append($("<span class=\"icon is-small is-right\"><i class=\"fas fa-times\"></i></span>"));
            return flag;
        }
        $.get({
            url: "userCheck",
            data: {
                v0: v0,
            },
            success: function (data) {
                if (data === "0") {
                    $l_ipt_name.addClass("is-danger");
                    $l_ipt_name.removeClass("is-success");
                    $(".name-help").text("该用户不存在");
                    $l_name_area.empty();
                    $l_name_area.append($("<span class=\"icon is-small is-right\"><i class=\"fas fa-exclamation-triangle\"></i></span>"));
                } else {
                    $l_ipt_name.addClass("is-success");
                    $l_ipt_name.removeClass("is-danger");
                    $l_name_area.empty();
                    $l_name_area.append($("<span class=\"icon is-small is-right\"><i class=\"fas fa-check\"></i></span>"));
                    flag = true;
                }
            }
        });
        return flag;
    }

    function login() {
        let $l_ipt_name = $(".l-ipt-name");
        let $l_ipt_pwd = $(".l-ipt-pwd");
        let v0 = $l_ipt_name.val().trim();
        let v1 = $l_ipt_pwd.val();
        if (v0 == null || v0 === "") {
            $l_ipt_name.focus();
            return;
        }
        if (v1 == null || v1 === "") {
            $l_ipt_pwd.focus();
            return;
        }
        $.post({
            url: "login",
            data: {
                v0: v0,
                v1: v1,
            },
            success: function (data) {
                if (data === "0") {
                    alert("用户密码错误");
                    $l_ipt_pwd.focus();
                    $l_ipt_pwd.addClass("is-danger");
                } else {
                    $(window).attr('location', data);
                }
            }
        });
    }

</script>
<body>
<div class="container">
    <div class="tile is-parent">
        <article class="tile is-child notification is-light">
            <p class="title">Ineffable云相册</p>
            <p class="subtitle">留住你的美丽瞬间</p>
            <div class="content">
            </div>
        </article>
    </div>

    <div class="lr-div">
        <div class="lr-middle"></div>
        <article class="media">
            <div class="media-left">
                <div>
                    <figure>
                        <p class="image is-64x64">
                            <img th:src="@{/image/cover.JPG}">
                        </p>
                    </figure>

                </div>
            </div>

            <div class="media-content">
                <div class="content">
                    <div class="field">
                        <label class="label">用户名</label>
                        <div class="control has-icons-left has-icons-right">
                            <input class="input l-ipt-name" type="text" placeholder="用户名" value="">
                            <span class="icon is-small is-left">
                                <i class="fas fa-user"></i>
                            </span>
                            <div class="name-info-area">
                                <!--<span class="icon is-small is-right">-->
                                <!--<i class="fas fa-check"></i>-->
                                <!--</span>-->
                            </div>
                        </div>
                        <p class="name-help help is-danger"></p>
                    </div>

                    <div class="field">
                        <label class="label">密码</label>
                        <div class="control has-icons-left has-icons-right">
                            <input class="input l-ipt-pwd" type="password" placeholder="密码" value="">
                            <span class="icon is-small is-left">
                                <i class="fas fa-key"></i>
                            </span>
                            <div class="pwd-info-area">

                                <!--<span class="icon is-small is-right">-->
                                <!--<i class="fas fa-check"></i>-->
                                <!--</span>-->
                            </div>
                            <!--<span class="icon is-small is-right">-->
                            <!--<i class="fas fa-check"></i>-->
                            <!--</span>-->
                        </div>
                    </div>

                    <br>
                    <div class="field is-grouped">
                        <div class="control">
                            <button class="button is-link l-btn">登录</button>
                        </div>
                        <div class="control">
                            <button class="button is-text" onclick="registerHelp()">没有账户？点我注册</button>
                            <script>
                                function registerHelp() {
                                    alert("目前只开放给内测用户");
                                }
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>


    <footer class="footer my-footer">
        <div class="content has-text-centered">
            <p>
                <strong>@author</strong> <a href="https://ineffable.page">lss</a>
            </p>
        </div>
    </footer>


</div>
</body>
<style type="text/css">
    html body {
        /*background: url("/image/cover.JPG") no-repeat center center fixed;*/
        height: 100vh;
        width: 100%;
    }

    .lr-div {
        width: 36%;
        margin: 100px auto;
        z-index: 10;

    }

    .my-footer {
        position: fixed;
        padding-top: 0;
        padding-bottom: 0;
        left: 0;
        bottom: 0;
        width: 100%;
    }
</style>
</html>